<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>main_list</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			dd{margin: 0;}
		   .mui-content-padded{margin-top: 1.5rem;}
			.chart {
				height: 13rem;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.chart_bot{
				background: #fff;
				padding:1rem;
				width:100%;
			}
			.chart_mid,.chart_mid_r{height: 13rem;}
			.chart_mid{
				background: #fff;
				padding:0.5rem 1rem;
				width:35%;
			}
			.chart_mid_r{
				background: #fff;
				padding:0.5rem 1rem;
				width:62%;
			}
			.chart_mid_r p{height: 1rem;font-size: 0.8rem;margin:0.7rem 0;}
			.chart_mid_r p a{width: 50%;overflow: hidden;white-space: normal;text-overflow: ellipsis; color:#777777;}
			.chart_mid_r p span{width: 45%;overflow: hidden;white-space: normal;text-overflow: ellipsis; }
			.chart_mid h2,.chart_mid_r h2{
				font-size: 1.2rem;
				font-weight: 500;
				color:#F47D00;
				border-left:5px solid #5b72f4;
				padding-left: 0.5rem;
				line-height: 1.5rem;
			}
			.chart_bot h2{
				font-size: 1.2rem;
				font-weight: 500;
				color:#F47D00;
				border-left:5px solid #5b72f4;
				padding-left: 0.5rem;
				line-height: 1.5rem;
			}
			.myWork div{
				height: 2.4rem;
			}
			.myWork div input{
				float: left;
				background: transparent;
				border: 0;
				width: 40%;
				margin: 0;
				font-size: 0.8rem;
			}
			.myWork div label{
				float: left;
				width: 58%;
				margin-top: 0.5rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: right;
				font-size: 0.8rem;
			}
			.chart_top{width: 110%;}
			.chart_top>div{width: 20%;margin-right: 3.57%;padding:0.5rem;background: #fff;}
			.chart_top>div a{display: block;}
			.chart_top>div img{display: block; margin:0 auto;width: 50%;}
			.chart_top>div dd{text-align: center;color: #000;margin-top: 1.3rem;}
			.mui-media-body{line-height: 2.5rem; font-size: 1rem;}
			.mui-table-view{background: transparent;}
			.mui-table-view-cell{padding:0;margin:-10px 0;}
			.mui-table-view:before{height: 0;}
			.mui-table-view:after{height: 0;}
			#time{font-size:1rem;}
			#dialog{overflow-y: scroll;height: 73%;}
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				
					<div class="mui-content-padded">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media">
									<img class="mui-media-object mui-pull-left" src="img/u38.png">
									<div class="mui-media-body">
										<strong class="acountname"></strong>,欢迎登陆
										<span id="time" class="mui-pull-right" style="margin-right: 1rem;">
										</span>
									</div>
							</li>
						</ul>
					</div>
					<div class="mui-content-padded">
						<div class="chart_top">
							<div class="fl chart_top_1">
								<a href="javascript:void(0);" id="1">
									<dl>
										<dt><img src="img/u72.png"/></dt>
										<dd>在线总览</dd>
									</dl>
								</a>
							</div>
							<div class="fl chart_top_1">
								<a href="javascript:void(0);" id="2">
									<dl>
										<dt><img src="img/u73.png"/></dt>
										<dd>异常总览</dd>
									</dl>
								</a>
							</div>
							<div class="fl chart_top_1">
								<a href="javascript:void(0);" id="3">
									<dl>
										<dt><img src="img/u74.png"/></dt>
										<dd>工单总览</dd>
									</dl>
								</a>
							</div>
							<div class="fl chart_top_1">
								<a href="javascript:void(0);" id="4">
									<dl>
										<dt><img src="img/u75.png"/></dt>
										<dd>报表总览</dd>
									</dl>
								</a>
							</div>
						</div>
						<div class="mui-clearfix"></div>
					</div>
					<div class="mui-content-padded">
						<div class="fl chart_mid">
							<h2>我的工作</h2>
							<hr />
							<div class="myWork">
							    <div class="">
							    	<label>本月工作量：</label>
							    	<input type="text" id="this_month_sum" value="" readonly="readonly"/>
							    </div>
							    <div class="">
							    	<label>本月已完成工作：</label>
							    	<input type="text" id="this_month_finish" value="" readonly="readonly"/>
							    </div>
							    <div class="">
							    	<label>本月工作剩余：</label>
							    	<input type="text" id="this_month_undone" value="" readonly="readonly"/>
							    </div>
							    <div class="">
							    	<label>工作中：</label>
							    	<input type="text" id="working" value="" readonly="readonly"/>
							    </div>
							</div>
						</div>
						<div class="fr chart_mid_r">
							<h2>我的消息</h2>
							<hr />
							<div id="dialog">
							</div>
						</div>
						<div class="mui-clearfix"></div>
					</div>
					<div class="mui-content-padded">
						<div class="fl chart_bot">
							<h2>我的统计</h2>
							<hr style="margin-bottom: 1rem;" />
							<div class="fl mui-col-sm-6 mui-col-xs-12">
							    <div class="chart" id="barChart"></div>
							</div>
							<div class=" fl mui-col-sm-6 mui-col-xs-12">
			
							    <div class="chart" id="pieChart"></div>
							</div>
							
						</div>
						<div class="mui-clearfix"></div>
					</div>
				<!---->
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/public.js"></script>
		<script src="js/jquery.js"></script>
		<script>
		var user = JSON.parse(localStorage.getItem('$users')).account;
		$('.acountname').text(user);
		CurentTime();
		function CurentTime()
		    { 
		        var now = new Date();
		       
		        var year = now.getFullYear();       //年
		        var month = now.getMonth() + 1;     //月
		        var day = now.getDate();            //日
		       
		        var hh = now.getHours();            //时
		        var mm = now.getMinutes();          //分
		       
		        var clock = year + "-";
		       
		        if(month < 10)
		            clock += "0";
		       
		        clock += month + "-";
		       
		        if(day < 10)
		            clock += "0";
		           
		        clock += day + " ";
		       
		        if(hh < 10)
		            clock += "0";
		           
		        clock += hh + ":";
		        if (mm < 10) clock += '0'; 
		        clock += mm;
		        document.getElementById('time').innerHTML=clock; 
		        setTimeout('CurentTime()',60000);
		    }
		    //我的工作
		    function myWork(){
		    	mui.ajax({
			            type: "POST",
					    url: __PATH__+"index/main",
					    async: true,
					    data:{
					    	username:user
					    },
					    dataType: "json",
					    json: "jsoncallback",
					    timeout: 1000,
					    success: function(data) {
//					    	console.log(data);
					    	this_month_sum.value=data.sum;
							this_month_finish.value=data.finish;
							this_month_undone.value=data.undone;
							working.value=data.working;								    	
					    }
//					    error:function(xhr,type,errorThrown){
//							mui.alert("请下拉刷新",'提示') 				
//						}
					});
		    }
		    //我的消息
		    function dialog(){
		    	   mui.ajax({
			            type: "POST",
					    url: __PATH__+"index/news",
					    async: true,
					    data:{
					    	username:user
					    },
					    dataType: "json",
					    json: "jsoncallback",
					    timeout: 1000,
					    success: function(data) {
//					    	console.log(data);
					    	mui.each(data,function(item,i){
						   	if(item<5){
						   		var html = '<p><input type="hidden" value="'+i.updatetime+'" class="updatetime"><input type="hidden" value="'+i.send_member+'" class="send_member"><input type="hidden" value="'+i.resourceName+'" class="resourceName"><input type="hidden" value="'+i.orderNo+'" class="orderNo"><input type="hidden" value="'+i.abnormal_name+'" class="abnormal_name"><input type="hidden" value="'+i.createtime+'" class="createtime"><input type="hidden" value="'+i.id+'" class="id"><a href="javascript:void(0);" class="fl p">'+i.resourceName+i.abnormal_name+'</a><span class="fr">'+i.updatetime+'</span></p>'
			                    mui('#dialog')[0].insertAdjacentHTML('afterbegin', html);
						   	} 	  
			              });
					    }
//					    error:function(xhr,type,errorThrown){
//							mui.alert("请下拉刷新",'提示') 				
//						}
					});
		    	   //
					
				}
		    //tongji
		    var pieDataLeg = [];
		    var pieDataSize = [];
		    var barDataLeg = [];
		    var barDataSize = [];
		    function total(){
		    	 mui.ajax({
			            type: "POST",
					    url: __PATH__+"index/main_total",
					    async: true,
					    data:{
					    	username:user
					    },
					    dataType: "json",
					    json: "jsoncallback",
					    timeout: 1000,
					    success: function(data) {
					    	barDataLeg = data[0];
					    	barDataSize = data[1];
					    	pieDataLeg = data[2];
					        pieDataSize = data[3];
					    	console.log(pieDataSize);
					    	var getOption = function(chartType) {
								var chartOption = chartType == 'pie' ? {
									tooltip : {
					                    trigger: 'item',
					                    formatter: "{a} <br/>{b} : {c} ({d}%)"
					                },
					                legend: {
					                	itemWidth: 14,
				                        itemHeight: 14,
					                    bottom:'1%',
					                    textStyle: {
					                      color:'#000'
					                    },
					                    data: pieDataLeg
					                },
					                series : [
					                    {
					                        name: '访问来源',
					                        type: 'pie',
					                        radius : '65%',
					                        center: ['50%', '37%'],
					                        grid: {
											top:0,
											x: 35,	
											y2: 25,
											borderWidth:'0'
										},
					                        data:pieDataSize,
					                        label: {
					                            normal: {
					                               formatter: function (obj) {
							                            return obj.percent.toFixed(0) + '%'
							                        },
					                                position: 'inner'
					                            },
					                            emphasis: {
					                                show: true,
					                                textStyle: {
					                                    fontSize: '30',
					                                    fontWeight: 'bold'
					                                }
					                            }
					                        },
					                        itemStyle: {
					                            emphasis: {
					                                shadowBlur: 10,
					                                shadowOffsetX: 0,
					                                shadowColor: 'rgba(0, 0, 0, 0.5)'
					                            }
					                        }
					                    }
					                ],
					                color:['#fe860c','#32316a','#00a3ff','#f45b86','#62f45b','#f6ff00','#1828f6','#f6a518','#f61d18','#bdfb01']
								} : {
									grid: {
										top:10,
										x: 35,	
										y2: 25,
										borderWidth:'0'
									},
									tooltip:{
										axisPointer:{
											type:'none'
										}
									},
									xAxis:[
							          {
				
							              nameGap:'2',
							              axisLine: {
							                  show: true,
							                  lineStyle:{
							                      color:'#000',
							                      width:1
							                  }
							              },
							              splitLine: {
							                  show: false                  
							              },
							              data: barDataLeg
							          } 
							      ],
							      yAxis:{
							          name:'单位（个）',
							          splitLine: {
							          	 show: true,
							          	 lineStyle: {
							          	 	color: ['#ccc'],
							          	 	type:'dotted',
							          	 	width:1
							          	 }
							          },
							          
							          axisLine:{
							          	  show:true,
							              lineStyle:{
							                  color:'#000',
							                  width:1
							              }
							          }
							      },
									series: [{
										name: '总数',
										type: chartType,
										barWidth: 25,
										data: barDataSize
									}],
									color:['#ffe900']
								};
								return chartOption;
							};
							var byId = function(id) {
								return document.getElementById(id);
							};
							var barChart = echarts.init(byId('barChart'));
							barChart.setOption(getOption('bar'));
							var pieChart = echarts.init(byId('pieChart'));
							pieChart.setOption(getOption('pie'));
					    }
//					    error:function(xhr,type,errorThrown){
//							mui.alert(xhr,'提示') 				
//						}
					});
		    	   //
		    }
		</script>
		<script>
			(function($, doc) {
				 mui.init({
						pullRefresh: {
							container: '#pullrefresh',
							down: {
								callback: pulldownRefresh
							},
							up: {
								contentrefresh: '正在加载...',
								callback: pullupRefresh
							}
						}
					});
					/**
					 * 下拉刷新具体业务实现
					 */
					function pulldownRefresh() {
						location.reload()
					}
					/**
					 * 上拉加载具体业务实现
					 */
					function pullupRefresh() {
						location.reload()
					}
				//
				var settings = app.getSettings();
				
				var account = doc.getElementById('account');
				//
				
				var this_month_sum = document.getElementById("this_month_sum");
				var this_month_finish = document.getElementById("this_month_finish");
				var this_month_undone = document.getElementById("this_month_undone");
				var working = document.getElementById("working");
				//接收值开始；
//				plus.nativeUI.showWaiting();
                //我的工作    
                
                setTimeout("myWork()",300);
				//我的消息
				
				setTimeout("dialog()",800);
				//我的统计
                setTimeout("total()",1800);
                mui.getJSON('json.json', null, function(data) {
//                  console.log(data)
                    					
					pieDataLeg = data.chart.pieDataLeg;
					pieDataSize = data.chart.pieDataSize;
					barDataLeg = data.chart.barDataLeg;
					barDataSize = data.chart.barDataSize;
					console.log(barDataSize)
				   
					
					
					//
                });

				//接收值结束
				
				window.addEventListener('show', function() {
					var state = app.getState();
					account.innerText = state.account;
				}, false);
				$.plusReady(function() {
					var settingPage = $.preload({
						"id": 'work_order',
						"url": 'examples/work_order.html'
					});
					//设置
//					var settingButton = doc.getElementById('my');
//					//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
//					settingButton.addEventListener('tap', function(event) {
//						$.openWindow({
//							id: 'work_order',
//							show: {
//								aniShow: 'pop-in'
//							},
//							styles: {
//								popGesture: 'hide'
//							},
//							waiting: {
//								autoShow: false
//							}
//						});
//					});
					//
					
					//--
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
				//daohang
					  $('.chart_top').on('tap','a',function(){
					  	var atid = this.id;
					  	switch(atid)
							{
							case "1":
//								  $.openWindow({
//										url:"sub2.html",
//										id:"sub2.html",
//										style:{},
//										show:{
//											autoShow:true,
//											aniShow:"slide-in-right",
//											duration:100
//										},
//										waiting:{
//											autoShow:true,
//											title:"正在加载·····"
//										}
//								})
							  break;
							case "2":
//								  $.openWindow({
//										url:"sub2.html",
//										id:"sub2.html",
//										style:{},
//										show:{
//											autoShow:true,
//											aniShow:"slide-in-right",
//											duration:100
//										},
//										waiting:{
//											autoShow:true,
//											title:"正在加载·····"
//										}
//								 })
							  break;
							  case "3":
								  $.openWindow({
								  	    url:"examples/work_order.html",
										id:"work_order",
										style:{},
										show: {
											aniShow: 'pop-in'
										},
										styles: {
											popGesture: 'hide'
										},
										waiting: {
											autoShow: false
										}
								})
							  break;
							  case "4":
//								  $.openWindow({
//										url:"sub2.html",
//										id:"sub2.html",
//										style:{},
//										show:{
//											autoShow:true,
//											aniShow:"slide-in-right",
//											duration:100
//										},
//										waiting:{
//											autoShow:true,
//											title:"正在加载·····"
//										}
//								})
							  break;
							}
					  });
			}(mui, document));
			//消息跳转
				$('#dialog').on('tap','p',function(){
					var abnormal_name = $(this).children('.abnormal_name').val();
					var createtime = $(this).children('.createtime').val();
					var id = $(this).children('.id').val();
					var orderNo = $(this).children('.orderNo').val();
					var resourceName = $(this).children('.resourceName').val();
					var send_member = $(this).children('.send_member').val();
					var updatetime = $(this).children('.updatetime').val();
					mui.openWindow({
							url:"examples/dialog_details.html",
							id:"dialog_details",
							style:{},
						   extras:{
						   	    abnormal_name:abnormal_name,
							   	createtime:createtime,
							   	updatetime:updatetime,
							   	resourceName:resourceName,
							   	send_member:send_member,
							   	orderNo:orderNo
						   },
							show:{
								autoShow:true,
								aniShow:"slide-in-right",
								duration:100
							},
							waiting:{
								autoShow:true,
								title:"正在加载·····",
								options:{
					//				width:
					//				height:
								}
							}
					})
				});
				//消息跳转
		</script>
	</body>

</html>